<template>
  <div class="page-container">
    <div class="mt-3"></div>
    <a-row :gutter="[16, 10]">
      <a-col>
        <view class="title"><img class="picture" :src="shortPic" width="20" />短租待办事项</view>
      </a-col>
      <template v-for="(item, index) in shortOrder" :key="index">
        <a-col v-if="isShowToDoItem(item)" :xs="12" :sm="8" :md="6" :lg="6" :xl="4" :xxl="3">
          <TodoItem :item="item" @onhandleview="onhandleview" />
        </a-col>
      </template>
    </a-row>
    <a-divider class="custom-divider" />
    <div class="mt-3"></div>
    <a-row :gutter="[20, 10]">
      <a-col>
        <view class="title"><img class="picture" :src="longPic" width="20" />长租待办事项</view>
      </a-col>
      <template v-for="(item, index) in czsOrder" :key="index">
        <a-col v-if="isShowToDoItem(item)" :xs="12" :sm="8" :md="6" :lg="6" :xl="4" :xxl="3">
          <TodoItem :item="item" @onhandleview="onhandleview" />
        </a-col>
      </template>
    </a-row>
    <a-divider class="custom-divider" />
    <div class="mt-3"></div>
    <a-row :gutter="[20, 10]">
      <a-col>
        <view class="title"><img class="picture" :src="operatePic" width="20" />运维待办事项</view>
      </a-col>
      <template v-for="(item, index) in operate" :key="index">
        <a-col v-if="isShowToDoItem(item)" :xs="12" :sm="8" :md="6" :lg="6" :xl="4" :xxl="3">
          <TodoItem :item="item" @onhandleview="onhandleview" />
        </a-col>
      </template>
    </a-row>
    <!-- 是否显示结算待办事项 -->
    <template v-if="isShowSettleMentPane">
      <a-divider class="custom-divider" />
      <div class="mt-3"></div>
      <a-row :gutter="[20, 10]">
        <a-col>
          <view class="title"><img class="picture" :src="jsPic" width="20" />结算待办事项</view>
        </a-col>
        <template v-for="(item, index) in settlement" :key="index">
          <a-col v-if="isShowToDoItem(item)" :xs="12" :sm="8" :md="6" :lg="6" :xl="4" :xxl="3">
            <TodoItem :item="item" @onhandleview="onhandleview" />
          </a-col>
        </template>
      </a-row>
    </template>
    <!-- 是否显示押金待办事项 -->
    <template v-if="isShowDepositPane">
      <a-divider class="custom-divider" />
      <div class="mt-3"></div>
      <a-row :gutter="[20, 10]">
        <a-col>
          <view class="title"><img class="picture" :src="yjPic" width="20" />押金待办事项</view>
        </a-col>
        <template v-for="(item, index) in deposit" :key="index">
          <a-col v-if="isShowToDoItem(item)" :xs="12" :sm="8" :md="6" :lg="6" :xl="4" :xxl="3">
            <TodoItem :item="item" @onhandleview="onhandleview" />
          </a-col>
        </template>
      </a-row>
    </template>
    <!-- 运维待办事项 -->
    <!-- GPS异常 -->
    <Cjyctips ref="cjyctips" />
    <!-- 车辆异动 -->
    <Clydtips ref="clydtips" />
    <!-- 车辆多天未动 -->
    <Cldtwdtips ref="cldtwdtips" />
    <!-- 车辆油电量异常 -->
    <Clydlyctips ref="clydlyctips" />
    <!-- 车辆里程异常 -->
    <Cllcyctips ref="cllcyctips" />
    <!-- 车辆待巡检 -->
    <Cldxjtips ref="cldxjtips" />
    <!-- 驶出禁出围栏 -->
    <Scjcwltips ref="scjcwltips" />
    <!-- 驶入禁入围栏 -->
    <Srjrwltips ref="srjrwltips" />
    <!-- 交强险即将到期 -->
    <Jqxtips ref="jqxtips" />
    <!-- 商业险即将到期 -->
    <Syxtips ref="syxtips" />
    <!-- 即将保养 -->
    <Jjbytips ref="jjbytips" />
    <!-- 即将年检 -->
    <Jjnjtips ref="jjnjtips" />
    <!-- 违章待查询 -->
    <Wzdcxtips ref="wzdcxtips" />

    <!-- 结算待办事项 -->
    <!-- 同行费用即将结算 -->
    <Thfytips ref="thfytips" />
    <!-- 供应商费用即将结算 -->
    <Gysfytips ref="gysfytips" />

    <!-- 押金代办事项 -->
    <Wyzcyjtips ref="wyzcyjtips" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, computed } from 'vue'
  import { ref, onMounted } from 'vue'
  import { getStatistics } from '@/api/workplace.js'
  import { Message } from '@arco-design/web-vue'
  import TodoItem from './components/TodoItem.vue'
  import { ruleDetail } from '@/api/system/backlogrule'

  import { usePermission } from '@/hooks/usePermission'
  import shortPic from '@/assets/short-operate.png'
  import longPic from '@/assets/long-operate.png'
  import operatePic from '@/assets/operate.png'
  import jsPic from '@/assets/js-operate.png'
  import yjPic from '@/assets/yj-operate.png'
  import useNavigate from '@/hooks/useNavigate'
  import useUserStore from '@/store/modules/user'
  // 运维待办事项
  import Cjyctips from './components/workplace/operate/Cjyctips.vue'
  import Clydtips from './components/workplace/operate/Clydtips.vue'
  import Cldtwdtips from './components/workplace/operate/Cldtwdtips.vue'
  import Clydlyctips from './components/workplace/operate/Clydlyctips.vue'
  import Cllcyctips from './components/workplace/operate/Cllcyctips.vue'
  import Cldxjtips from './components/workplace/operate/Cldxjtips.vue'
  import Scjcwltips from './components/workplace/operate/Scjcwltips.vue'
  import Srjrwltips from './components/workplace/operate/Srjrwltips.vue'
  import Jqxtips from './components/workplace/operate/Jqxtips.vue'
  import Syxtips from './components/workplace/operate/Syxtips.vue'
  import Jjbytips from './components/workplace/operate/Jjbytips.vue'
  import Jjnjtips from './components/workplace/operate/Jjnjtips.vue'
  import Wzdcxtips from './components/workplace/operate/Wzdcxtips.vue'
  import Wyzcyjtips from './components/workplace/deposit/Wyzcyjtips.vue'

  // 结算待办事项
  import Thfytips from './components/workplace/settlement/Thfytips.vue'
  import Gysfytips from './components/workplace/settlement/Gysfytips.vue'
  import { useRoute } from 'vue-router'

  export default defineComponent({
    name: 'WorkPlace',
    components: {
      TodoItem,
      Cjyctips,
      Clydtips,
      Cldtwdtips,
      Clydlyctips,
      Cldxjtips,
      Cllcyctips,
      Scjcwltips,
      Srjrwltips,
      Jqxtips,
      Syxtips,
      Jjbytips,
      Jjnjtips,
      Wzdcxtips,
      Thfytips,
      Gysfytips,
      Wyzcyjtips,
    },
    setup() {
      const { redirectTo } = useNavigate()
      // 获取商户是否开启etc和tbox
      const userStore = useUserStore()
      userStore.setEpDetail()
      const depositRule = ref({})
      // 卡片是否显示
      const isShowToDoItem = (item) => {
        // 1 对应按钮权限
        // 2 rulePermission
        //   2.1 如果当前卡片没有配置 rulePermission 则默认显示
        //   2.2 如果配置了 rulePermission, 则再看 ruleStatus 是否为 true
        const permission = usePermission(item.permissioncard) && (!item.rulePermission || (item.rulePermission && item.ruleStatus))
        if (item.label == '车辆信息待完善') {
          // 特殊：车辆信息待完善卡片显隐，还取决于是否需开通了好人好车etc服务
          return permission && (userStore?.enterpriseDetail?.hrhcEtcEnabled == 1 || userStore?.enterpriseDetail?.quantumEtcEnabled == 1)
        } else if (item.label == '违章待查询') {
          // 特殊：违章待查询卡片显隐，还取决于是否需开通了违章查询功能
          return permission && userStore?.enterpriseDetail?.config?.ifOpenViolation == 1
        } else {
          return permission
        }
      }

      // 短租代办事项
      let shortOrder = reactive([
        {
          org: 'shortOrder',
          label: '待排车',
          title: 'waitPlatoon',
          tooltip: '短租订单的排车操作完成后，消除提醒。',
          id: 0,
          count: 0,
          permission: 'svms:order:short-order',
          permissioncard: 'svms:order:short-orderoperate',
        },
        {
          org: 'shortOrder',
          label: '即将交车',
          title: 'waitGive',
          tooltip: '短租订单的交车操作完成后，消除提醒。',
          count: 0,
          permission: 'svms:order:short-order',
          permissioncard: 'svms:order:short-orderoperate',
          rulePermission: 'giveSoonStatus',
        },
        {
          org: 'shortOrder',
          label: '逾期未交',
          title: 'giveOverdue',
          tooltip: '短租订单的交车操作完成后，消除提醒。',
          count: 0,
          permission: 'svms:order:short-order',
          permissioncard: 'svms:order:short-orderoperate',
        },
        {
          org: 'shortOrder',
          label: '逾期未还',
          title: 'returnOverdue',
          tooltip: '短租订单的还车操作完成后，消除提醒。',
          count: 0,
          permission: 'svms:order:short-order',
          permissioncard: 'svms:order:short-orderoperate',
        },
        {
          org: 'shortOrder',
          label: '明日交车',
          title: 'giveTomorrow',
          tooltip: '短租订单的交车操作完成后，消除提醒。',
          count: 0,
          permission: 'svms:order:short-order',
          permissioncard: 'svms:order:short-orderoperate',
        },
        {
          org: 'shortOrder',
          label: '明日还车',
          title: 'returnTomorrow',
          tooltip: '短租订单的还车操作完成后，消除提醒。',
          count: 0,
          permission: 'svms:order:short-order',
          permissioncard: 'svms:order:short-orderoperate',
        },
        {
          org: 'shortOrder',
          label: '合同签署中(普通版)',
          title: 'ordinaryNum',
          count: 0,
          tooltip: false,
          permission: 'svms:order:short-order', //未配置
          permissioncard: 'svms:order:short-orderoperate',
        },
        {
          org: 'shortOrder',
          label: '合同签署中(付费版)',
          title: 'signingNum',
          count: 0,
          tooltip: false,
          permission: 'svms:order:short-order', //未配置
          permissioncard: 'svms:order:short-orderoperate',
        },
      ])
      // 长租代办事项
      let czsOrder = reactive([
        {
          org: 'czsOrder',
          label: '待排车',
          title: 'waitPlatoon',
          tooltip: '长租订单的排车操作完成后，消除提醒。',
          count: 0,
          disabled: true,
          permission: 'svms:order:long-order',
          permissioncard: 'svms:order:long-orderoperate',
        },
        {
          org: 'czsOrder',
          label: '即将交车',
          title: 'waitGive',
          tooltip: '长租订单的交车操作完成后，消除提醒。',
          count: 0,
          disabled: true,
          permission: 'svms:order:long-order',
          permissioncard: 'svms:order:long-orderoperate',
          rulePermission: 'giveSoonStatus',
        },
        {
          org: 'czsOrder',
          label: '逾期未交',
          title: 'giveOverdue',
          tooltip: '长租订单的交车操作完成后，消除提醒。',
          count: 0,
          disabled: true,
          permission: 'svms:order:long-order',
          permissioncard: 'svms:order:long-orderoperate',
        },
        {
          org: 'czsOrder',
          label: '逾期未还',
          title: 'returnOverdue',
          tooltip: '长租订单的还车操作完成后，消除提醒。',
          count: 0,
          disabled: true,
          permission: 'svms:order:long-order',
          permissioncard: 'svms:order:long-orderoperate',
        },
        {
          org: 'czsOrder',
          label: '明日交车',
          title: 'giveTomorrow',
          tooltip: '长租订单的交车操作完成后，消除提醒。',
          count: 0,
          disabled: true,
          permission: 'svms:order:long-order',
          permissioncard: 'svms:order:long-orderoperate',
        },
        {
          org: 'czsOrder',
          label: '明日还车',
          title: 'returnTomorrow',
          tooltip: '长租订单的还车操作完成后，消除提醒。',
          count: 0,
          disabled: true,
          permission: 'svms:order:long-order',
          permissioncard: 'svms:order:long-orderoperate',
        },
        {
          org: 'czsOrder',
          label: '合同签署中(普通版)',
          title: 'ordinaryNum',
          count: 0,
          tooltip: false,
          permission: 'svms:order:long-order', //未配置
          permissioncard: 'svms:order:long-orderoperate',
        },
        {
          org: 'czsOrder',
          label: '合同签署中(付费版)',
          title: 'signingNum',
          count: 0,
          tooltip: false,
          permission: 'svms:order:long-order', //未配置
          permissioncard: 'svms:order:long-orderoperate',
        },
      ])
      // 运维待办事项
      const operate = reactive([
        {
          org: 'operate',
          label: 'GPS异常',
          title: 'vehicleError',
          tooltip: 'GPS上报刷新后，消除提醒。',
          id: 0,
          count: 0,
          permission: 'svms:index:operation:abnormalview',
          permissioncard: 'svms:index:operation:abnormal',
          rulePermission: 'carVehicleErrorStatus',
        },
        {
          org: 'operate',
          label: '车辆异动',
          title: 'carAbnormalMovement',
          tooltip: '通过处理，消除待办提醒。',
          id: 0,
          count: 0,
          permission: 'svms:index:operation:movementview',
          permissioncard: 'svms:index:operation:movement',
          rulePermission: 'carAbnormalMoveStatus',
        },
        {
          org: 'operate',
          label: '车辆多天未动',
          title: 'carUnmove',
          tooltip: '车辆绑定的GPS上报的位置有变化，消除待办提醒。通过处理，消除待办提醒。',
          id: 0,
          count: 0,
          permission: 'svms:index:operation:movedaysview',
          permissioncard: 'svms:index:operation:movedays',
          rulePermission: 'carUnmoveStatus',
        },
        {
          org: 'operate',
          label: '车辆油电量异常',
          title: 'carOilError',
          tooltip: '通过处理，消除待办提醒。',
          id: 0,
          count: 0,
          permission: 'svms:index:operation:caroilview',
          permissioncard: 'svms:index:operation:caroil',
          rulePermission: 'oilErrorStatus',
        },
        {
          org: 'operate',
          label: '车辆里程异常',
          title: 'carMileageError',
          tooltip: '通过处理，消除待办提醒。',
          id: 0,
          count: 0,
          permission: 'svms:index:operation:mileageview',
          permissioncard: 'svms:index:operation:mileage',
          rulePermission: 'mileageErrorStatus',
        },
        {
          org: 'operate',
          label: '车辆待巡检',
          title: 'carView',
          tooltip: '可通过车辆待巡检中的处理、订单中的还车和换车操作或者运维单中完成维修的操作，消除待办提醒。',
          id: 0,
          count: 0,
          permission: 'svms:index:operation:inspectedview',
          permissioncard: 'svms:index:operation:inspected',
          rulePermission: 'carViewStatus',
        },
        {
          org: 'operate',
          label: '驶出禁出围栏',
          title: 'electricFenceIn',
          tooltip: '车辆绑定的GPS上报的位置在禁出围栏内后，消除待办提醒。',
          id: 0,
          count: 0,
          permission: 'svms:index:operation:electricFenceInview',
          permissioncard: 'svms:index:operation:electricFenceIn',
        },
        {
          org: 'operate',
          label: '驶入禁入围栏',
          title: 'electricFenceOut',
          tooltip: '车辆绑定的GPS上报的位置不在禁入围栏内后，消除待办提醒。',
          id: 0,
          count: 0,
          permission: 'svms:index:operation:electricFenceOutview',
          permissioncard: 'svms:index:operation:electricFenceOut',
        },
        {
          org: 'operate',
          label: '交强险即将到期',
          title: 'insureCompulsory',
          tooltip: '给车辆新增一条交强险，消除提醒。',
          id: 0,
          count: 0,
          permission: 'svms:index:operation:insureCompulsoryview',
          permissioncard: 'svms:index:operation:insureCompulsory',
          rulePermission: 'insureCompulsoryStatus',
        },
        {
          org: 'operate',
          label: '商业险即将到期',
          title: 'insureBusiness',
          tooltip: '给车辆新增一条商业险，消除提醒。',
          id: 0,
          count: 0,
          permission: 'svms:index:operation:insureBusinessview',
          permissioncard: 'svms:index:operation:insureBusiness',
          rulePermission: 'insureBusinessStatus',
        },
        {
          org: 'operate',
          label: '即将保养',
          title: 'maintenanceWait',
          tooltip: '新增对应车辆保养，消除提醒。',
          id: 0,
          count: 0,
          permission: 'svms:index:operation:imaintenanceWaitview',
          permissioncard: 'svms:index:operation:imaintenanceWait',
          rulePermission: 'maintenanceBeforeStatus',
        },
        {
          org: 'operate',
          label: '即将年检',
          title: 'inspectionWait',
          tooltip: '新增对应车辆的年检，消除提醒。',
          id: 0,
          count: 0,
          permission: 'svms:index:operation:inspectionWaitview',
          permissioncard: 'svms:index:operation:inspectionWait',
          rulePermission: 'inspectionBeforeStatus',
        },
        {
          org: 'operate',
          label: '待维修车辆',
          title: 'repairWait',
          tooltip: '对应车辆的开始维修操作完成后，消除提醒。',
          id: 0,
          count: 0,
          disabled: false,
          permission: 'svms:asstes:operation:car-repair',
          permissioncard: 'svms:index:operation:repairWait',
        },
        {
          org: 'operate',
          label: '待处理违章',
          title: 'violationNotDeal',
          tooltip: '对应违章的处理违章操作完成后，消除提醒。',
          id: 0,
          count: 0,
          permission: 'svms:asstes:operation:car-violation',
          permissioncard: 'svms:index:operation:violationNotDeal',
        },
        {
          org: 'operate',
          label: '支出单审批待处理',
          title: 'costWaitProcessing',
          tooltip: '完成支出单的审批处理后，消除提醒。',
          id: 0,
          count: 0,
          permission: 'svms:business:operate-cost',
          permissioncard: 'svms:index:operation:costWaitProcessing',
        },
        {
          org: 'operate',
          label: '支出单等待付款',
          title: 'costWaitPay',
          tooltip: '完成支出单的付款后，消除提醒。',
          id: 0,
          count: 0,
          permission: 'svms:business:operate-cost',
          permissioncard: 'svms:index:operation:costWaitPay',
        },
        {
          org: 'operate',
          label: '车辆信息待完善',
          title: 'hrhcCarWaitSync',
          tooltip: '通过修改信息并同步成功来消除待办，请注意需要完善信息的车辆包含【未发起同步】及【待修改】',
          id: 0,
          count: 0,
          permission: 'svms:asstes:equipment:car-info',
          permissioncard: 'svms:index:operation:hrhcCarWaitSync',
        },
        {
          org: 'operate',
          label: '违章待查询',
          title: 'violationQuery',
          tooltip: '订单还车后车辆未查询违章则提醒，可查询违章或关闭提醒',
          id: 0,
          count: 0,
          permission: 'svms:index:operation:violationWaitQueryView',
          permissioncard: 'svms:index:operation:violationWaitQuery',
          rulePermission: 'violationQueryStatus',
        },
      ])
      // 结算待办事项
      const settlement = reactive([
        {
          org: 'settlement',
          label: '同行费用即将结算',
          title: 'sameIndustryInfoWaitSettle',
          tooltip: '完成同行费用的确认对账操作后，消除提醒。',
          count: 0,
          permission: 'svms:index:settlement:sameIndustryview',
          permissioncard: 'svms:index:settlement:sameIndustry',
          rulePermission: 'industryBillStatus',
        },
        {
          org: 'settlement',
          label: '供应商费用即将结算',
          title: 'supplierWaitSettle',
          tooltip: '完成供应商费用的确认对账操作后，消除提醒。',
          count: 0,
          permission: 'svms:index:settlement:supplierview',
          permissioncard: 'svms:index:settlement:supplier',
          rulePermission: 'supplierBillStatus',
        },
        {
          org: 'settlement',
          label: '长租费用即将结算',
          title: 'czsOrderWaitSettle',
          tooltip: '长租订单的费用确认完成后，消除提醒。',
          count: 0,
          permission: 'svms:order:long-order',
          permissioncard: 'svms:index:settlement:long-order',
          rulePermission: 'czsFeeBillStatus',
        },
      ])
      // 押金代办事项
      const deposit = reactive([
        {
          org: 'deposit',
          label: '押金未缴纳',
          title: 'shortOrderGiveUnpay',
          tooltip: '押金缴纳后或订单状态到已完成了就会消除提醒',
          count: 0,
          permission: 'svms:order:short-order',
          permissioncard: 'svms:index:deposit.giveunpay',
          rulePermission: 'depositOrderGiveUnpayStatus',
        },
        {
          org: 'deposit',
          label: '租车押金应退未退',
          title: 'shortOrderReturnUnrefund',
          tooltip: '租车押金状态到应退已退或已作废后会消除提醒',
          count: 0,
          permission: 'svms:order:short-order',
          permissioncard: 'svms:index:deposit.returnunrefund',
          rulePermission: 'depositOrderReturnUnrefundStatus',
        },
        {
          org: 'deposit',
          label: '违章押金应退未退',
          title: 'shortOrderViolationUnrefund',
          tooltip: '违章押金状态到应退已退或已作废后会消除提醒',
          count: 0,
          permission: 'svms:order:short-order',
          permissioncard: 'svms:index:deposit.violationunrefund',
          rulePermission: 'depositOrderViolationUnrefundStatus',
        },
        {
          org: 'deposit',
          label: '租车押金即将到期',
          title: 'carFreezeDue',
          tooltip: '租车押金状态到应退已退或已作废后会消除提醒',
          count: 0,
          permission: 'svms:finance:deposit',
          permissioncard: 'svms:index:deposit.carFreezeDue',
          rulePermission: 'depositCarFreezeDueStatus',
        },
        {
          org: 'deposit',
          label: '违章押金即将到期',
          title: 'violationFreezeDue',
          tooltip: '违章押金状态到应退已退或已作废后会消除提醒',
          count: 0,
          permission: 'svms:finance:deposit',
          permissioncard: 'svms:index:deposit.violationFreezeDue',
          rulePermission: 'depositViolationFreezeDueStatus',
        },
        {
          org: 'deposit',
          label: '唯一租车押金即将到期',
          title: 'memberFreezeDue',
          tooltip: '用户有新的租车押金授权成功或唯一的这笔租车提醒押金状态到应退已退或已作废',
          count: 0,
          permission: 'svms:index:deposit.memberFreezeDue.view',
          permissioncard: 'svms:index:deposit.memberFreezeDue',
          rulePermission: 'depositMemberFreezeDueStatus',
        },
      ])
      onMounted(() => {
        // 获取统计数据
        getStatistics({})
          .then((res: any) => {
            if (res.code === 200) {
              // 短租代办事项
              shortOrder.map((item) => {
                item.count = res.result.shortOrder[item.title] || 0
              })
              // 长租待办
              czsOrder.map((item) => {
                item.count = res.result.czsOrder[item.title] || 0
              })
              // 运维代办
              operate.map((item) => {
                item.count = res.result.operate[item.title] || 0
              })
              // 结算待办
              settlement.map((item) => {
                item.count = res.result.settlement[item.title] || 0
              })
              // 押金待办
              deposit.map((item) => {
                item.count = res.result.deposit[item.title] || 0
              })
            }
          })
          .catch((err: any) => {
            Message.error(err.message)
          })
        // 获取待办规则配置，控制部分卡片显隐
        ruleDetail()
          .then((res: any) => {
            // 短租待办，长租待办，运维待办，结算待办，押金待办
            ;[shortOrder, czsOrder, operate, settlement, deposit].forEach((pane) => {
              pane.forEach((item: any) => {
                // 存在 rulePermission 说明其是否显示受待办规则配置影响
                if (item.rulePermission) item.ruleStatus = res.result[item.rulePermission] == 1 ? true : false
              })
            })
            // 跳转押金列表入参
            depositRule.value = res.result
          })
          .catch((err: any) => {
            Message.error(err.message)
          })
        if (routeQuery.label) {
          getRouteData(routeQuery.label)
        }
      })

      // 是否显示结算待办事项
      const isShowSettleMentPane = computed(() => {
        return settlement.some((item) => isShowToDoItem(item))
      })
      // 是否显示押金待办事项
      const isShowDepositPane = computed(() => {
        return deposit.some((item) => isShowToDoItem(item))
      })
      //运维待办事项
      const cjyctips = ref()
      const clydtips = ref()
      const cldtwdtips = ref()
      const clydlyctips = ref()
      const cllcyctips = ref()
      const cldxjtips = ref()
      const scjcwltips = ref()
      const srjrwltips = ref()
      const jqxtips = ref()
      const syxtips = ref()
      const jjbytips = ref()
      const wzdcxtips = ref()
      const jjnjtips = ref()
      const thfytips = ref()
      const gysfytips = ref()
      const wyzcyjtips = ref()
      const onhandleview = (item: any) => {
        if (item.org === 'shortOrder') {
          if (item.label === '待排车') {
            redirectTo(`/order/short-order?id=10`)
          } else {
            redirectTo(`/order/short-order?name=${item.label}`)
          }
        } else if (item.org === 'czsOrder') {
          if (item.label === '待排车') {
            redirectTo(`/order/long-order?id=10`)
          } else {
            redirectTo(`/order/long-order?name=${item.label}`)
          }
        } else if (item.org === 'operate') {
          switch (item.label) {
            case 'GPS异常':
              cjyctips.value.open(item.label)
              break
            case '车辆异动':
              clydtips.value.open(item.label)
              break
            case '车辆多天未动':
              cldtwdtips.value.open(item.label)
              break
            case '车辆油电量异常':
              clydlyctips.value.open(item.label)
              break
            case '车辆里程异常':
              cllcyctips.value.open(item.label)
              break
            case '车辆待巡检':
              cldxjtips.value.open(item.label)
              break
            case '驶出禁出围栏':
              scjcwltips.value.open(item.label)
              break
            case '驶入禁入围栏':
              srjrwltips.value.open(item.label)
              break
            case '交强险即将到期':
              jqxtips.value.open(item.label)
              break
            case '商业险即将到期':
              syxtips.value.open(item.label)
              break
            case '即将保养':
              jjbytips.value.open(item.label)
              break
            case '即将年检':
              jjnjtips.value.open(item.label)
              break
            case '待维修车辆':
              redirectTo(`/assets/operation/car-repair?status=0`)
              break
            case '待处理违章':
              redirectTo(`/assets/violation/car-violation?id=0`)
              break
            case '支出单审批待处理':
              redirectTo(`/business/operate-cost?tag=1`)
              break
            case '支出单等待付款':
              redirectTo(`/business/operate-cost?tag=2`)
              break
            case '车辆信息待完善':
              redirectTo(`/value-added/etc/car-info?prop=unSyncCount`)
              break
            case '违章待查询':
              wzdcxtips.value.open(item.label)
              break
            default:
              return
          }
        } else if (item.org === 'settlement') {
          if (item.label === '同行费用即将结算') {
            thfytips.value.open(item.label)
          } else if (item.label === '供应商费用即将结算') {
            gysfytips.value.open(item.label)
          } else if (item.label === '长租费用即将结算') {
            redirectTo(`/order/long-order?name=即将结算`)
          }
        } else if (item.org === 'deposit') {
          let arr = ['押金未缴纳', '租车押金应退未退', '违章押金应退未退']
          if (arr.includes(item.label)) {
            redirectTo(`/order/short-order?name=${item.label}`)
          } else if (['租车押金即将到期', '违章押金即将到期'].includes(item.label)) {
            let time = item.label === '租车押金即将到期' ? depositRule.value.depositCarFreezeDueDay : depositRule.value.depositViolationFreezeDueDay
            let status = item.label === '租车押金即将到期' ? 'carDepositStatusList' : 'illegalDepositStatusList'
            redirectTo(`/finance/deposit?time=${time}&status=${status}&statusList=50,30`)
          } else if (item.label === '唯一租车押金即将到期') {
            wyzcyjtips.value.open(item.label)
          }
        }
      }
      const route = useRoute()
      const routeQuery = route.query
      const getRouteData = (label: any) => {
        switch (label) {
          case '车辆油电量异常':
            clydlyctips.value.open(label)
            break
          case '车辆里程异常':
            cllcyctips.value.open(label)
            break

          case '交强险即将到期':
            jqxtips.value.open(label)
            break
          case '商业险即将到期':
            syxtips.value.open(label)
            break
          case '即将保养':
            jjbytips.value.open(label)
            break
          case '即将年检':
            jjnjtips.value.open(label)
            break
          case '待维修车辆':
            redirectTo(`/assets/operation/car-repair?status=0`)
            break
          case '待处理违章':
            redirectTo(`/assets/violation/car-violation?id=0`)
            break
          default:
            return
        }
      }
      return {
        onhandleview,
        shortOrder,
        czsOrder,
        operate,
        settlement,
        deposit,
        // 运维待办事项
        cjyctips,
        clydtips,
        cldtwdtips,
        clydlyctips,
        cldxjtips,
        cllcyctips,
        scjcwltips,
        srjrwltips,
        jqxtips,
        syxtips,
        jjbytips,
        wzdcxtips,
        jjnjtips,
        thfytips,
        gysfytips,
        wyzcyjtips,
        shortPic,
        longPic,
        operatePic,
        jsPic,
        yjPic,
        isShowToDoItem,
        isShowSettleMentPane,
        isShowDepositPane,
      }
    },
  })
</script>

<style lang="less" scoped>
  .title {
    font-size: 16px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #1d2129;
    line-height: 24px;
  }
  .picture {
    margin-right: 5px;
    vertical-align: sub;
  }
</style>
